<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>浪客三人组的直播间</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body {
            width: 100%;
            height: 100%;
        }

        video {
            width: 100%;
            max-width: 800px;
            height: auto;
        }

        button {
            margin-top: 30px;
            width: 100%;
            height: 14vw;
            font-size: 18px;
            max-width: 200px;
            max-height: 40px;
            background-color: #FD482C;
            border-radius: 5px;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div>
    <video id="live" autoplay controls poster="https://sekiro.oss-cn-beijing.aliyuncs.com/static/images/poster.jpeg">
        <source src=""/>
    </video>
</div>
<div style="display: flex;justify-content: center">
    <button onclick="play()">点击播放</button>
</div>

<br/>

<script src="lib/hls.js"></script>
<script>
    var video = document.getElementById('live');
    if (Hls.isSupported()) {
        var hls = new Hls();
        hls.attachMedia(video);
        // MEDIA_ATTACHED event is fired by hls object once MediaSource is ready
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
            console.log('video and hls.js are now bound together !');
            hls.loadSource('http://live.psn.asia/live/live2.m3u8');
            hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                console.log(
                    'manifest loaded, found ' + data.levels.length + ' quality level'
                );
            });
        });
    }else {
        video.src = "http://live.psn.asia/live/live2.m3u8"
        // alert("浏览器不支持hls.js")
        console.log("浏览器不支持hls.js")
    }
    function play() {
        console.log("点击播放")
        video.play()
    }
</script>
</body>
</html>